<template>
  <div class="page-content">
    <div class="header">
      <h3>客服设置</h3>
    </div>

    <el-form label-width="120px" style="margin-top: 20px">
      <el-form-item label="联系电话：" prop="phone">
        <el-input v-model="sys.mobile" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="微信号：" prop="wxNumber">
        <el-input v-model="sys.wxNumber" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="二维码：" prop="wxUrl">
        <el-input v-model="sys.wxUrl" style="display: none"></el-input>

        <div class="avatar-uploader" @click="showImageChooseDialog = true">
          <el-image v-if="sys.wxUrl" :src="sys.wxUrl" class="avatar" fit="contain"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
              <Plus />
            </el-icon></i>
        </div>
      </el-form-item>
      <!-- 在线客服 -->
      <el-form-item label="在线客服" prop="status">
        <el-radio v-model="radio_kf" label="1">普通微信客服</el-radio>
        <el-radio v-model="radio_kf" label="0">企业微信客服</el-radio>
      </el-form-item>
      <el-form-item label="企业ID" v-if="radio_kf == '0'" prop="enterpriseId">
        <el-input v-model="sys.enterpriseId" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="企业客服连接" v-if="radio_kf == '0'" prop="enterpriselink">
        <el-input v-model="sys.enterpriseLink" :disabled="!isEdit" />
      </el-form-item>
      <div class="header" style="margin: 20px 0;">
        <h3>关于我们</h3>
      </div>
      <el-form-item label="关于我们" prop="remark">
        <ArtWangEditor v-model="editorHtml" class="addcont" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="用户隐私协议" prop="memberPrivacyAgreement">
        <el-input v-model="sys.memberPrivacyAgreement" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="协议内容" prop="memberPrivacyAgreementTxt">
        <ArtWangEditor v-model="editorHtml_two" class="addcont" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="用户服务协议" prop="memberServiceAgreement">
        <el-input v-model="sys.memberServiceAgreement" :disabled="!isEdit" />
      </el-form-item>
      <el-form-item label="服务内容" prop="memberServiceAgreementTxt">
        <ArtWangEditor v-model="editorHtml_three" class="addcont" style="width: 100%;" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 90px" v-ripple @click="edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </el-form-item>
    </el-form>
    <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
      :operationType="false"></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
import type { UploadFile } from 'element-plus'
import { kefuSetting, addKefuSetting } from '@/api/driverSchoolApi'
import { useUserStore } from '@/store/modules/user'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

const userStore = useUserStore()
let server = `${import.meta.env.VITE_API_URL}files`
let { accessToken } = userStore
const headers = { Authorization: 'Bearer ' + accessToken }

// const ewbPic = ref('')
const sys = ref({
  id: '',
  mobile: '',
  wxNumber: '',
  wxUrl: '',
  status: 0,
  enterpriseId: '',
  enterpriseLink: '',
  remark: '',
  memberPrivacyAgreement: '',
  memberPrivacyAgreementTxt: '',
  memberServiceAgreement: '',
  memberServiceAgreementTxt: '',
  type: 2
})
const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) {
    sys.value.wxUrl = value.fileUrl
  }
  showImageChooseDialog.value = false
}

const isEdit = ref(false)
const disabled = ref(false)
const radio_kf = ref('1')
//富文本编辑器
const editorHtml = ref(``)
//富文本编辑器
const editorHtml_two = ref(``)
const editorHtml_three = ref(``)

const edit = async () => {
  isEdit.value = !isEdit.value
  const { id, ...submitSys } = sys.value;
  if (!isEdit.value) {
    console.log(isEdit.value, "isEdit.value===");
    if (!sys.value.id) {
      console.log(submitSys, 'submitSys===');
      const res = await addKefuSetting(
        submitSys
      )
      if (res.code === '00000') {
        ElMessage.success('新增成功')
        getData()
      }
    } else {
      let params = {
        id: sys.value.id,
        mobile: sys.value.mobile,
        wxNumber: sys.value.wxNumber,
        wxUrl: sys.value.wxUrl,
        status: radio_kf.value,
        enterpriseId: sys.value.enterpriseId,
        enterpriseLink: sys.value.enterpriseLink,
        remark: editorHtml.value,
        memberPrivacyAgreement: sys.value.memberPrivacyAgreement,
        memberPrivacyAgreementTxt: editorHtml_two.value,
        memberServiceAgreement: sys.value.memberServiceAgreement,
        memberServiceAgreementTxt: editorHtml_three.value,
        type: 2
      }
      const res = await addKefuSetting(
        params
      )
      if (res.code === '00000') {
        ElMessage.success('编辑成功')
        getData();
      }
    }

  }
}


const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const getData = async () => {
  const res = await kefuSetting()
  if (res.code === '00000' && res.data) {
    sys.value = res.data
    // ewbPic.value = sys.value.wxUrl
    editorHtml.value = sys.value.remark
    editorHtml_two.value = sys.value.memberPrivacyAgreementTxt
    editorHtml_three.value = sys.value.memberServiceAgreementTxt
    radio_kf.value = String(sys.value.status)
  }
}
// const handleAvatarSuccess = (file: any) => {
//   ewbPic.value = file.data.url
//   sys.value.wxUrl = file.data.url
// }
//上传限制大小格式等
const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 10240 / 10240 < 2
  if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
    ElMessage.error('图片类型仅支持JPG/PNG/GIF格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 20MB!!')
    return false
  }
}
onMounted(() => {
  getData()
})

</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 20px 20px 92px !important;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--art-border-color);

    h3 {
      font-size: 18px;
      // font-weight: 500;
    }
  }

  :deep(.el-form) {
    .el-form-item {
      max-width: 1200px;
      z-index: 9;
    }
  }
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.addcont {
  z-index: 1;
}
</style>
